{% load staticfiles %}
{% include "header.html" %}
<div class="container" style="padding: 0px">
    {% csrf_token %}
    <form class="edit-form" action="/edit/" method="post" enctype="multipart/form-data">
        <div class="edit-file-box">
            <input id="edit-file" name="icon" class="edit-file" type="file" value="浏览"/>
             {% if user.icon %}
                 <img id="edit-icon" class="edit-icon" src="/media/{{ user.icon }}">
            {% else %}
                 <img id="edit-icon" class="edit-icon" src="/static/images/icon.jpg">
            {% endif %}
        </div>
        <div class="edit-row">
            <a class="edit-text-help">用户名</a>
            <a type="text" class="edit-text">{{ user.username }}</a>
        </div>
        <div class="edit-row">
            <a class="edit-text-help">昵称</a>
            <input type="text"  name="name" class="edit-text" value="{{ user.name }}">
        </div>
        <div class="edit-row">
            <a class="edit-text-help">签名</a>
            <input type="text" class="edit-text"  name="text" value="{{ user.text }}">
        </div>
        <input class="edit-submit" type="submit" value="保存">
    </form>
</div>

</div>
{% load staticfiles %}
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript">
    (function () {
        $('.nav__trigger').on('click', function (e) {
            e.preventDefault();
            $(this).parent().toggleClass('nav-active');
        });
        $("#edit-file").change(function(e){
             var file = e.target.files||e.dataTransfer.files;
             if(file){
                 var reader = new FileReader();
                 reader.onload=function(){
                        document.getElementById('edit-icon').src = this.result;
                 }
                reader.readAsDataURL(this.files[0]);
            }
      });
    }())
</script>

<script type="text/javascript">
    if (window !== top) top.location = window.location;
</script>
</body>
</html>